import React, { Component } from 'react';
import { PageContainer } from '@ant-design/pro-layout'
import { Button, message, Input, Space, Tag } from 'antd';
import MusicAPI from '@/services/ant-design-pro/music';
import Create from './components/Create'
import Detail from './components/Detail'
import { connect } from 'dva'
import TagSelect from '@/components/TagSelect';
import './style/index.less'
const { getSongList, deleteSongList } = MusicAPI

@connect(({ music }) => ({
    classifyTags: music.classifyTags
}))
class SongList extends Component {

    constructor(props) {
        super(props);
    }

    state = {
        isModalVisible: false,
        curItem: undefined, //当前选中歌单
        curTag: undefined, //当前选择标签
        curSelectname: undefined, //当前查询歌单名
        data: undefined,
    }

    componentWillMount() {
        this.setSongList()
    }

    /**
     * 设置歌单数据到state
     * @returns obj(歌单列表)
     */
    setSongList = async () => {
        const { curItem } = this.state;
        const result = await getSongList({
            Needlyric: 1
        });

        this.setState({
            data: result.data.value,
        })

        curItem && this.setState({
            curItem: {
                ...result.data.value[curItem.index],
                index: curItem.index
            }
        })
    }

    getSongList = async (params) => {
        const data = await getSongList();

        let list_name = params.list_name || "",
            tag = params.tag + '' || 0,
            result = data.data.value;

        if ((list_name.trim().length > 0 && list_name != undefined) ||
            (tag != '0' && tag != 'undefined')) {
            result = result.filter((item, index) => {
                
                if (item.lable_ids && tag != '0' && tag != 'undefined' && list_name) {
                    for (let i in item.lable_ids) {
                        if (item.lable_ids[i] == tag &&
                            item.list_name.toLowerCase().indexOf(list_name.toLowerCase()) >= 0)
                            return true;
                    }
                } else if (list_name) {
                    return item.list_name.toLowerCase().indexOf(list_name.toLowerCase()) >= 0
                } else if (item.lable_ids && tag) {
                    for (let i in item.lable_ids) {
                        return item.lable_ids[i] == tag
                    }
                }
            })
        }
        return this.setState({
            data: result
        })
    }
    handleSearchSongList = () => { //查询
        const { curTag, curSelectname } = this.state;
        this.getSongList({
            tag: curTag + "",
            list_name: curSelectname
        })
    }
    setCurTag = (tag) => { //选中标签
        this.setState({
            curTag: tag.curTag
        })
    }

    handleClickItem = (item, index) => { // 点击选中歌单
        this.setState({
            curItem: {
                ...item,
                index
            }
        })
    }

    delSongList = async (id) => {
        const result = await deleteSongList({
            list_id: id
        })
        if (result.status == 'ok') {
            await this.setSongList();
            message.success("删除成功");
        } else {
            message.error('删除失败：' + result.data.message);
            console.log(result.data.error);
        }
    }
    /**
    * 控制模态框显示与隐藏
    */
    isShowModal = (show, record = undefined) => {
        this.setState({
            isModalVisible: show,
            editData: record
        })
    };

    render() {
        const { classifyTags } = this.props;
        const { isModalVisible, editData, data, curItem } = this.state;
        return (
            <div>
                <PageContainer className="songList">
                    <div className="songList-left">
                        <div className="songlist-left-head">
                            <div className="songlist-space">
                                <Space>
                                    <span>标签:</span><TagSelect onSelect={this.setCurTag} />
                                </Space>
                            </div>

                            <div className="songlist-space">
                                <Space>
                                    <span>歌单名:</span><Input placeholder="歌单名" onChange={(e) => {
                                        this.setState({
                                            curSelectname: e.target.value
                                        })
                                    }} />
                                    <Button onClick={this.handleSearchSongList}>查询</Button>
                                    <Button onClick={() => this.isShowModal(true)}>添加</Button>
                                </Space>
                            </div>
                        </div>
                        <div className="songlist-left-body">
                            <div className="songlist-body-list scrollBar">
                                {
                                    data && data.map((item, index) => {
                                        return (<div className={`songlist-body-item ${curItem && (curItem.list_id == item.list_id ? 'active' : '')}`}
                                            key={index} onClick={() => this.handleClickItem(item, index)}>
                                            <div className="item-detail">
                                                <div className="item-title">
                                                    {item.list_name}
                                                </div>
                                                <div className="item-content">
                                                    {
                                                        classifyTags.sub && classifyTags.sub.length && item.lable_ids && item.lable_ids.map((jtem, jndex) => {
                                                            return <Tag key={jndex}>{classifyTags.sub.find(item => item.id == jtem).name}</Tag>
                                                        })
                                                    }
                                                    <span className="item-songsum">{item.song_nums}首</span>
                                                    <a className="item-delete" onClick={() => this.delSongList(item.list_id)}>删除</a>
                                                </div>
                                            </div>
                                        </div>)
                                    })}
                            </div>
                        </div>
                    </div>
                    <div className="songList-right scrollBar">
                        <Detail
                            data={curItem}
                            setData={this.setSongList}
                        />
                    </div>
                </PageContainer>
                {
                    isModalVisible ?
                        <Create
                            isModalVisible={isModalVisible}
                            isShowModal={this.isShowModal}
                            initData={editData}
                            setData={this.setSongList}
                        /> : ""
                }
            </div >
        )
    }
}
export default SongList;